<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacked Photo Carousel</title>

    <style>
        html{
            font-size: 12px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #e0f1fa;
        }
        .image-box {
            position: absolute;
            top: 10rem;
            right: 10rem;
            width: 300px;
        }

        .image-box:first-child {
            transform: rotate(23deg);
        }
        .image-box:nth-child(2) {
            transform: rotate(328deg);
        }
        .image-box:nth-child(3) {
            transform: rotate(169deg);
        }
        .image-box .image {
            width: 100%;
            display: block;
            border: 1rem solid #fff;
            border-radius: 2rem;
            cursor: pointer;
            user-select: none;
        }

        @media screen and (max-width:768px) {
            html {
                font-size: 10px;
            }

            .image-box {
                width: 220px;
            }
        }

        @media screen and (max-width:576px) {
            html {
                font-size: 4.5px;
            }

            .image-box{
                width: 130px;
            }
        }
    </style>
</head>

<body>
    <div class="galleries">
        <div class="image-box">
            <img class="image" src="./1-1.png" alt="photo">
          </div>
        <div class="image-box">
            <img class="image" src="./1-2.png" alt="photo">
        </div>
        <div class="image-box">
            <img class="image" src="./1-3.png" alt="photo">
        </div>
        <div class="image-box">
            <img class="image" src="./1-4.png" alt="photo">
        </div>
    </div>

    <script>
        const imgElementes = document.querySelectorAll('.image-box');

        let zIndex = 1;

        imgElementes.forEach(ele => {
            ele.addEventListener("click", () => {
                zIndex++;

                ele.style.right = "50rem";
                ele.style.zIndex = zIndex;
                ele.style.transform = "rotate(0deg)";
                ele.style.transition = "all 0.3s";

                setTimeout(() => {
                    zIndex -= 3;

                    ele.style.right = "";
                    ele.style.zIndex = zIndex;
                    ele.style.transform = "";

                    setTimeout(() => {
                        ele.style.transition = "";
                    },300)
                },1000)
            });
        });
    </script>
</body>

</html>